<template>
    <div>
        <a-row>
            <!-- v-userAuth="'F2'" -->
            <a-row class='mytitle'>
                <div style="cursor: pointer;width: 360px" @click="handleNavigate">
                    <a-icon type="left" />
                    <span>{{ $t('返回') }}</span>
                    <span style="margin-left: 8px;">|</span>
                    <span style="margin-left: 8px">{{ $t('保护计划') }}</span>
                    <span style="margin-left: 8px;">/</span>
                    <span v-if="strategy_type == '1'" style="margin-left: 8px">{{ $t('创建文件系统定时快照策略') }}</span>
                    <span v-else-if="strategy_type == '2'" style="margin-left: 8px">{{ $t('创建文件系统快照备份策略') }}</span>
                </div>
            </a-row>

            <a-row style="margin:1em">
                <a-card hoverable>
                    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol"
                        :wrapper-col="wrapperCol">
                        <a-spin :spinning="loading">

                            <a-form-model-item :label="$t('策略名称')" prop="name">
                                <a-input v-model="form.name" :placeholder="$t('Enter') + $t('策略名称')" />
                            </a-form-model-item>

                            <a-form-model-item :label="$t('策略描述')" prop="describe">
                                <a-input v-model="form.describe" :placeholder="$t('Enter') + $t('策略描述')" />
                            </a-form-model-item>

                            <a-form-model-item v-if="strategy_type == '2'" :label="$t('平台')" prop="platform_id">
                                <a-select v-model="form.platform_id" :placeholder="$t('Enter') + $t('平台')">
                                    <a-select-option v-for="item of platformList" :value="item.value" :key="item.value">
                                        {{ item.label }}
                                    </a-select-option>
                                </a-select>
                            </a-form-model-item>

                            <a-form-model-item :label="$t('保护网关') + ':'" prop="project_gateway_id">
                                <a-select v-model="form.project_gateway_id" :placeholder="$t('Choose') + $t('保护网关')">
                                    <a-select-option v-for="item of gatewayOption" :value="item.value"
                                        :key="item.value">
                                        {{ item.label }}
                                    </a-select-option>
                                </a-select>
                            </a-form-model-item>

                            <a-form-model-item :label="$t('策略周期')" prop="raw_cycle_type">
                                <a-radio-group v-model="form.raw_cycle_type" @change="cycleChange">
                                    <a-radio v-for="item of cycleTypeGroup" :value="item.value" :key="item.value">{{
                                        item.label
                                        }}</a-radio>
                                </a-radio-group>

                                <div v-if="form.raw_cycle_type == '2'" style="margin-top: 8px;">
                                    <span>{{ $t('每周') }}</span>
                                    <a-checkbox-group style="margin-left: 16px;" v-model="form.raw_cycles"
                                        :options="plainOptions" />
                                </div>

                                <div v-if="form.raw_cycle_type == '3'" style="margin-top: 8px;">
                                    <div style="display: flex;align-items: center;">
                                        <div style="margin-bottom: 12px;margin-right: 8px;">{{ $t('每月') }}</div>
                                        <Calendar @get-date="getDate" />
                                    </div>
                                </div>
                            </a-form-model-item>

                            <a-form-model-item :label="$t('执行时间')" prop="raw_time_type" style="margin-top: -16px;">

                                <div style="background: #F0F3F5;padding: 10px">

                                    <a-radio-group v-model="form.raw_time_type">
                                        <a-radio v-for="item of typeGroup" :value="item.value" :key="item.value">{{
                                            item.label
                                            }}</a-radio>
                                    </a-radio-group>

                                    <div v-if="form.raw_time_type == '1'" style="display: flex;margin-top: 8px;">
                                        <a-form-model-item prop="raw_start_time">
                                            <a-time-picker v-model="form.raw_start_time" format="HH:mm:ss"
                                                valueFormat="HH:mm:ss" @change="startChange" :placeholder="$t('Choose') + $t('Time')"/>
                                        </a-form-model-item>
                                        <span style="margin-left: 16px;">-</span>
                                        <a-form-model-item prop="raw_end_time">
                                            <a-time-picker style="margin-left: 16px;" v-model="form.raw_end_time"
                                                format="HH:mm:ss" valueFormat="HH:mm:ss"
                                                :disabledHours="getDisabledHours" :disabledMinutes="getDisabledMinutes"
                                                :disabledSeconds="getDisabledSeconds" :placeholder="$t('Choose') + $t('Time')"/>
                                        </a-form-model-item>
                                    </div>

                                    <div style="display: flex;" v-if="form.raw_time_type == '1'">
                                        <span>{{ $t('每') }}</span>
                                        <a-form-model-item prop="raw_every_few">
                                            <a-input-number prop="raw_every_few"
                                                style="margin-left: 8px;margin-top: 4px;width: 148px" :min="1"
                                                :precision="0" v-model="form.raw_every_few"
                                                :placeholder="$t('Enter') + $t('数值')" />
                                        </a-form-model-item>
                                        <a-radio-group style="margin-left: 8px;margin-top: 4px"
                                            v-model="form.raw_every_few_type" @change="fewChange">
                                            <a-radio-button v-for="item of everyGroup" :value="item.value"
                                                :key="item.value">{{
                                                    item.label }}</a-radio-button>
                                        </a-radio-group>
                                        <span style="margin-left: 8px;">{{ $t('执行一次') }}</span>
                                    </div>

                                    <div v-if="form.raw_time_type == '2'">
                                        <a-form-model-item prop="raw_time">
                                            <a-time-picker v-model="form.raw_time" format="HH:mm:ss" valueFormat="HH:mm:ss" :placeholder="$t('Choose') + $t('Time')"/>
                                        </a-form-model-item>
                                    </div>
                                </div>

                            </a-form-model-item>

                            <a-form-model-item :label="$t('最大保存数量')" prop="reserve_count">
                                <a-input-number style="width: 100%;" :min="1" :max="99" :precision="0"
                                    v-model="form.reserve_count" :placeholder="$t('Enter') + $t('最大保存数量')" />
                            </a-form-model-item>

                            <a-form-model-item :wrapper-col="{ span: 14, offset: 3 }">
                                <a-button type="primary" @click="onSubmit">
                                    {{ $t('Save') }}
                                </a-button>
                                <a-button style="margin-left: 10px;" @click="resetForm">
                                    {{ $t('Cancel') }}
                                </a-button>
                            </a-form-model-item>
                        </a-spin>

                    </a-form-model>
                </a-card>
            </a-row>

        </a-row>
    </div>
</template>
<script>
import NoAuthPage from '@/components/common/NoAuthPage'
import EmptyData from '@/components/common/EmptyData'
import chooseDirectory from '../../storage_mgr/filesystem/directory/chooseDirectory.vue'
import Calendar from './calendar.vue'

export default {
    components: { EmptyData, NoAuthPage, chooseDirectory, Calendar },
    data() {
        return {
            loading: false,
            labelCol: { span: 3 },
            wrapperCol: { span: 8 },
            form: {
                name: '',
                describe: '',
                project_gateway_id: undefined,
                raw_cycle_type: 1,
                raw_cycles: [],
                raw_time_type: 1,
                raw_start_time: '',
                raw_end_time: '',
                raw_every_few: '',
                raw_every_few_type: 1,
                raw_time: '',
                reserve_count: '',
                strategy_type: '',
                target_type: 2,
                platform_type: 1,
                platform_id: undefined,
            },
            rules: {
                name: [
                    { required: true, message: this.$t('Enter') + this.$t('策略名称'), trigger: 'blur' },
                    { pattern: /^[A-Za-z0-9_]{1,128}$/, message: this.$t('支持大小写英文字母 + 数字 + 英文下划线，1-128 个字符'), trigger: 'blur' }
                ],
                platform_id: [
                    { required: true, message: this.$t('Choose') + this.$t('平台'), trigger: 'change' },
                ],
                project_gateway_id: [
                    { required: true, message: this.$t('Choose') + this.$t('策保护网关略名称'), trigger: 'change' },
                ],
                raw_cycle_type: [
                    { required: true, message: this.$t('Choose') + this.$t('策略周期'), trigger: 'change' },
                ],
                raw_time_type: [
                    { required: true, message: this.$t('Choose') + this.$t('执行时间'), trigger: 'change' },
                ],
                reserve_count: [
                    { required: true, message: this.$t('Enter') + this.$t('最大保存数量'), trigger: 'blur' },
                    { validator: (rules, value, callback) => { this.numValidator(rules, value, callback) }, trigger: 'blur' },
                ],
                raw_every_few: [
                    { validator: (rules, value, callback) => { this.fewValidator(rules, value, callback) }, trigger: 'change' },
                ],
                raw_end_time: [
                    { validator: (rules, value, callback) => { this.nullValidator(rules, value, callback) }, trigger: 'change' },
                ],
                raw_start_time: [
                    { validator: (rules, value, callback) => { this.nullValidator(rules, value, callback) }, trigger: 'change' },
                ],
                raw_time: [
                    { validator: (rules, value, callback) => { this.nullValidator(rules, value, callback) }, trigger: 'change' },
                ]
            },
            cycleTypeGroup: [
                { value: 1, label: '每天' },
                { value: 2, label: '每周' },
                { value: 3, label: '每月' },
            ],
            typeGroup: [
                { value: 1, label: '时间段' },
                { value: 2, label: '时间点' },
            ],
            everyGroup: [
                { value: 1, label: '分钟' },
                { value: 2, label: '小时' },
            ],
            platformList: [],
            plainOptions: [
                { label: '一', value: '1' },
                { label: '二', value: '2' },
                { label: '三', value: '3' },
                { label: '四', value: '4' },
                { label: '五', value: '5' },
                { label: '六', value: '6' },
                { label: '七', value: '7' },
            ],
            gatewayOption: [],
            strategy_type: '',
        }
    },
    async mounted() {
        const strategy_type = this.$route.query.strategy_type
        this.strategy_type = strategy_type
        this.form.strategy_type = strategy_type
        await this.getGatewayOption()
    },
    methods: {
        async getGatewayOption() {
            this.loading = true
            const { data: { project_gateway_infos, storage_platforms } } = await this.$api.data.getStrategyOptionApi({ strategy_type: this.strategy_type })
            this.gatewayOption = project_gateway_infos.map(item => {
                const obj = { value: item.id, label: item.info }
                return obj
            })
            this.platformList = storage_platforms.map(item => ({ label: item.name, value: item.storage_platform_id }))
            this.loading = false
        },
        handleNavigate() {
            this.$router.push({ path: '/protect_strategy' })
        },
        onSubmit() {
            this.$refs.ruleForm.validate(async valid => {
                if (valid) {
                    this.loading = true
                    if (this.form.raw_cycle_type == 2 && this.form.raw_cycles.length == 0) {
                        this.$message.error(this.$t('请选择每周日期'));
                    } else if (this.form.raw_cycle_type == 3 && this.form.raw_cycles.length == 0) {
                        this.$message.error(this.$t('请选择每月日期'));
                    } else {
                        const { data } = await this.$api.data.appendStrategyApi(this.form)
                        this.model(data.id) //返回模板
                        this.notice(data.id, data.params, data.flag) //通知列表显示
                        if (data.flag == '0') {
                            this.$router.push({ path: '/protect_strategy' })
                            this.$refs['ruleForm'].resetFields();
                        }
                    }
                    this.loading = false
                } else {
                    return false;
                }
            });
        },
        resetForm() {
            this.$router.push({ path: '/protect_strategy' })
            this.$refs.ruleForm.resetFields();
        },
        fewChange() {
            this.$nextTick(() => this.$refs.ruleForm.validateField(['raw_every_few']))
        },
        numValidator(rule, value, callback) {
            if (value) {
                if (value < 1 || value > 99) callback(this.$t('长度限制为1-99'))
                else callback()
            }
        },
        fewValidator(rule, value, callback) {
            if (value) {
                if (this.form.raw_every_few_type == '1') {
                    if (value < 10 || value > 59) callback(this.$t('分钟范围为10-59'))
                    else callback()
                } else if (this.form.raw_every_few_type == '2') {
                    if (value < 1 || value > 23) callback(this.$t('小时范围为1-23'))
                    else callback()
                }
            } else {
                callback(this.$t('Enter') + this.$t('数值'))
            }
        },
        nullValidator(rule, value, callback) {
            if (!value) callback(this.$t('Choose') + this.$t('时间'))
            else callback()
        },
        startChange(value) {
            let time = value
            let timeArr = time.split(':')
            let hour = parseInt(timeArr[0])
            let minute = parseInt(timeArr[1])
            let second = parseInt(timeArr[2])
            if (second < 59) second = second + 1
            else if (second == 59) second = 59
            this.form.raw_end_time = `${hour}:${minute}:${second}`
        },
        getDisabledHours() {
            if (this.form.raw_start_time) {
                let hours = []
                let time = this.form.raw_start_time
                let timeArr = time.split(':')
                for (let i = 0; i < parseInt(timeArr[0]); i++) {
                    hours.push(i)
                }
                if (parseInt(timeArr[1]) === 59) hours.push(parseInt(timeArr[0]))
                return hours
            }
        },
        getDisabledMinutes(selectedHour) {
            if (this.form.raw_start_time) {
                let time = this.form.raw_start_time
                let timeArr = time.split(':')
                let minutes = []
                if (selectedHour == parseInt(timeArr[0])) {
                    for (let i = 0; i < parseInt(timeArr[1]); i++) {
                        minutes.push(i)
                    }
                }
                return minutes
            }
        },
        getDisabledSeconds(selectedHour, selectedMinute) {
            if (this.form.raw_start_time) {
                let time = this.form.raw_start_time
                let timeArr = time.split(':')
                let seconds = []
                if (selectedHour == parseInt(timeArr[0]) && selectedMinute == parseInt(timeArr[1])) {
                    for (let i = 0; i < parseInt(timeArr[2]) + 1; i++) {
                        seconds.push(i)
                    }
                }
                return seconds
            }
        },
        getDate(list) {
            this.form.raw_cycles = list
        },
        cycleChange() {
            this.form.raw_cycles = []
        }
    }
}
</script>


<style scoped>
.title {
    color: #666666;
}

.size14 {
    font-size: 14px;
}

.line {
    width: 100%;
    border-bottom: solid 1px #cccccc;
    line-height: 0.9;
}

.shallow {
    color: #666666;
}

.mt-7 {
    margin-top: 7px;
}

.cont {
    color: #333333;
    font-weight: bolder;
}

.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
    color: #1E7EBF;
    border-color: #1E7EBF
}
</style>
